<template>
  <div class="table-container" :class="{ 'multi-table': true }">
    <div class="t-header">
      <div class="t-th" v-for="(item, index) in headers" :key="index">
        {{ item }}
      </div>
    </div>
    <div class="t-body">
      <div class="t-row" v-for="(row, rowIndex) in data" :key="rowIndex">
        <div class="t-td" v-for="(cell, cellIndex) in row" :key="cellIndex">
          <template v-if="isArray(cell)">
            <div class="t-td" v-for="(item, itemIndex) in cell" :key="itemIndex">
              {{ item }}
            </div>
          </template>
          <template v-else>{{ cell }}</template>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 表格列配置
  headers: {
    type: Array,
    default: () => []
  },
  // 表格数据
  data: {
    type: Array,
    default: () => []
  },
  // 是否显示斑马纹
  striped: {
    type: Boolean,
    default: true
  },
  // 是否显示悬停效果
  hover: {
    type: Boolean,
    default: true
  },
  // 空数据提示文本
  emptyText: {
    type: String,
    default: '暂无数据'
  },
  // 多表配置 - 用于并列显示多个表格
  multiTableConfig: {
    type: Array,
    default: () => []
  }
})

const isArray = (data) => {
  return Array.isArray(data)
}


</script>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
  background: white;

  .t-header {
    width: 100%;
    display: flex;
    background: #e8e8e8;
    font-weight: bold;
  }

  .t-body {
    width: 100%;

    .t-row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      &:nth-child(2n) {
        background-color: antiquewhite;
      }
      
      .t-td {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
      }
    }
  }

  .t-th, .t-td {
    flex: 1;
    flex-shrink: 0;
    text-align: center;
    min-height: 50px;
    padding: 10rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}
</style>